<template>
  <div class="app-item" @click.stop="$emit('open')">
    <div class="left">
      <img src="../../../assets/img/app.png" alt="" />
    </div>
    <div class="right">
      <el-popover
        placement="top-start"
        width="auto"
        trigger="hover"
        v-functions="['app_center_common_setting']"
        popper-class="app-item-popover"
        v-if="appList.includes(obj.id) && obj.isOpen"
      >
        <template>
          <el-link
            :underline="false"
            v-if="flag"
            @click="$emit('delCommonlyUsed')"
            >取消常用</el-link
          >
          <el-link :underline="false" v-else @click="$emit('setCommonlyUsed')"
            >设为常用</el-link
          >
        </template>
        <!-- <el-link :underline="false" @click="$emit('commonlyUsed')">取消常用</el-link> -->
        <span class="hoverShow changyong" slot="reference"
          ><ul class="app-item-ul">
            <li></li>
            <li></li>
            <li></li></ul
        ></span>
      </el-popover>
      <p class="app-item-title">
        <span class="title-left">{{ obj.name }}</span>
        <span :class="obj.isOpen ? '' : 'unopen'" class="title-right">{{
          obj.isOpen ? "使用中" : "未开通"
        }}</span>
      </p>
      <p class="app-item-context" :title="obj.description">
        {{ obj.description }}
      </p>
      <div
        class="app-item-button hoverShow"
        v-if="obj.isOpen && appList.includes(obj.id)"
        @click.stop="jump"
      >
        打开
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({ name: 'AppItem' })
export default class AppItem extends Vue {
  @Prop(Object) private obj!: any
  @Prop(Boolean) private flag!: boolean
  private $store: any
  private $router: any
  private $message: any
  public limit: string[] = []
  public appList = ['knowledge_mgt', 'robot', 'my_call_task_list', 'my_auto_call_task_list', 'auto_call_task_list', 'preview_dialout_list', 'sms']
  public jump () {
    console.log(this.limit)
    if (!(this.limit.includes(this.obj.id))) {
      this.$message.warning('没有权限')
      return
    }
    if (this.obj.id === 'knowledge_mgt') {
      this.$router.push({ name: 'knowledgeBase' })
    } else {
      this.$router.push({ name: this.obj.id })
    }
  }

  public created () {
    this.limit = this.$store.state.common.session.user.limits
  }
}
</script>
<style lang='stylus' scoped>
.changyong
  position absolute
  z-index 10
  right 20px
  top 28px
.hoverShow
  display none
.app-item
  display flex
  position relative
  width 334px
  height 113px
  background #FFFFFF
  border 1px solid #ECF0F3
  box-shadow 0px 1px 3px 0px #E8EBEF
  border-radius 10px
  margin-top 21px
  cursor pointer
  .right
    position relative
    flex 1
    padding-top 26px
  .left
    width 90px
    vertical-align top
    padding-top 24px
    padding-left 20px
    img
      width 50px
      height 50px
.app-item:hover
  box-shadow 0px 0px 16px 0px rgba(216,216,216,0.84)
  .hoverShow
    display inline-block
.app-item>div
  display inline-block
  height 100%
.app-item-ul
  padding 0px 10px
  li
    height 2px
    width 2px
    margin-bottom 2px
    background #A6A6AE
.app-item-title
  font-size 14px
  font-family PingFang SC
  font-weight 600
  color #303753
  height 14px
  margin-bottom 15px
  line-height 14px
  position relative
  span.unopen
    background rgba(186,189,195,0.1) !important
    color #BABDC3 !important
  span.title-right
    margin-left 8px
    display inline-block
    width 46px
    height 18px
    background rgba(0,139,238,0.1)
    border-radius 2px
    color #008BEE
    font-size 12px
    text-align center
    line-height 18px
.app-item-context
  font-size 12px
  font-family PingFang SC
  font-weight 400
  color #767E91
  line-height 20px
  padding-right 31px
  overflow hidden
  text-overflow ellipsis
  display -webkit-box //作为弹性伸缩盒子模型显示。
  -webkit-box-orient vertical //设置伸缩盒子的子元素排列方式--从上到下垂直排列
  -webkit-line-clamp 2 //显示的行
.app-item-button.hoverShow
  width 60px
  height 26px
  background #F2F2F7
  opacity 0.9
  border-radius 13px
  position absolute
  right 10px
  bottom 10px
  color #008BEE
  text-align center
  line-height 26px
.app-item-button:hover
  background #008BEE
  color #FFFFFF
</style>
<style>
.app-item-popover {
  min-width: unset;
}
</style>
